<template>
  <div>
    <h1>搜索结果</h1>
    <ul>
      <li v-for="book in books" :key="book.id">
        <h2>{{ book.title }}</h2>
        <p>作者：{{ book.author }}</p>
        <p>书籍介绍：{{ book.description }}</p>
		<button @click="goToComment(book)">查看评论</button>
      </li>
    </ul>

    <p v-if="errorMessage">{{ errorMessage }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      books: [], // 用于存储搜索结果数据
      errorMessage: '' // 用于显示错误信息
    };
  },
  mounted() {
    this.fetchSearchResults();
  },
  methods: {
    fetchSearchResults() {
      const keyword = this.$route.params.keyword;
      axios.get(`http://127.0.0.1:8080/v1/search/book?keyword=${keyword}`)
        .then(response => {
          this.books = response.data.data; // 将搜索结果数据存储到组件的 books 属性中
        })
        .catch(error => {
          console.error(error);
          if (error.response) {
            this.errorMessage = `请求错误：${error.response.status} ${error.response.statusText}`;
          } else {
            this.errorMessage = '请求错误，请稍后重试';
          }
        });
    },
    goToComment(book) {
      // 跳转到书籍评论页面的逻辑
      // 假设跳转链接为 '/book/:bookId/comments'
      this.$router.push(`/book/${book.id}/comments`);
    }
  }    
};
</script>
